// 公共变量
@primary-color: #1890ff;
@success-color: #52c41a;
@warning-color: #faad14;
@error-color: #f5222d;
@border-color: #f0f0f0;
@hover-color: #e6f7ff;

// 订单详情触发器
.order-detail-trigger {
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    color: @primary-color;
    transform: translateY(-1px);
  }
}

// 模态框美化
.enhanced-order-modal {
  .ant-modal-header {
    border-bottom: 1px solid @border-color;

    .ant-modal-title {
      font-size: 18px;
      color: rgba(0, 0, 0, 0.85);
    }
  }

  .ant-modal-body {
    padding: 16px 24px;
    max-height: 70vh;
    overflow-y: auto;
  }
}

// 基础信息区域
.order-base-info {
  .important-text {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }

  .highlight-text {
    color: @primary-color;
    font-weight: 500;
  }

  .money-text {
    font-weight: 600;
    color: @success-color;
  }

  .address-text {
    white-space: pre-wrap;
    word-break: break-all;
  }

  .note-text {
    white-space: pre-wrap;

    &.empty {
      color: rgba(0, 0, 0, 0.25);
      font-style: italic;
    }
  }

  .ant-descriptions-item-label {
    font-weight: 500;
  }
}

.products-grid-container {
  .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
  }

  .product-card {
    border-radius: 8px;
    transition: all 0.3s;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }

    .card-header {
      margin-bottom: 8px;

      .product-name {
        margin-bottom: 8px;
        font-weight: 500;
      }
    }

    .info-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      line-height: 1.5;
    }

    .card-footer {
      display: flex;
      justify-content: flex-end;
    }
  }

  .grid-summary {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    background-color: #fafafa;
    border-radius: 8px;
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: 1fr !important;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .enhanced-order-products {
    .order-products-table {
      .ant-table-thead {
        display: none;
      }

      .ant-table-tbody > tr {
        display: block;
        border-bottom: 1px solid #f0f0f0;
        padding: 12px;
        position: relative;

        > td {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border: none !important;
          padding: 8px 0;

          &::before {
            content: attr(data-label);
            font-weight: 500;
            margin-right: 12px;
            color: rgba(0, 0, 0, 0.85);
          }
        }
      }

      // 为移动端添加数据标签
      [data-label]::before {
        content: attr(data-label) !important;
      }
    }
  }
}
